<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>customized ui demo</title>
		<link rel="stylesheet" type="text/css" href="layout.css"/>
	</head>
	<body>
		<h1>customized ui demo</h1>
		<div id="ucoder-wrap">
			<div id="ucoder-toolbar"><button  class="toolbar-item" id="bold" title="加粗">加粗</button><button  class="toolbar-item" id="italic" title="加斜">斜体</button><button  class="toolbar-item" id="numberlist" title="有序列表">有序列表</button><button  class="toolbar-item" id="bulletlist" title="无序列表">无序列表</button><button class="toolbar-item" id="paste" title="纯文本粘贴">纯文本粘贴</button><button class="toolbar-item" id="blockquote" title="引用">引用</button><button class="toolbar-item" id="insert">插入</button><button class="toolbar-item" id="searchreplace">查找替换</button></div>
			<div id="ucoder-holder"></div>
            <div id="helper">
                <h3>shortcuts</h3>
                <ul>
                    <li>undo：ctrl+Z</li>
                    <li>redo：ctrl+Y</li>
                    <li>缩进：tab</li>
                    <li>反缩进：shift+tab</li>
                </ul>
                
		    </div>
            <div id="customizedTips">
                    <h3>自定义toolbar</h3>
                    <dl>
                        <dt>如何通过toolbar上按钮对编辑器进行操作</dt>
                        <dd>
                            <ul>
                                <li>1. 监听toolbar上按钮的事件，如点击事件</li>
                                <li>2. 在事件处理中，执行execCommand命令，即可对编辑器进行操作</li>
                                <li></li>
                            </ul>
                        </dd>
                        <dt>如何将toolbar上按钮状态与编辑器文本区相绑定</dt>
                        <dd>
                            <ul>
                                <li>1. 监听editor实例的selectionchange事件</li>
                                <li>2. 在事件处理中，执行queryCommandState命令，获得当前按钮command的状态</li>
                                <li>3. 对于同一个command对应多种样式时，如文字大小、文字间距等，需要执行queryCommandValue命令，来获得具体的值</li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            <div id="searchreplaceiframe"></div>
		</div>
		
		
	</body>
</html>
<script type="text/javascript" charset="utf-8" src="ueditor-min.js"></script>
<script type="text/javascript"src="indent.plugin.js"></script>
<script type="text/javascript"src="binduibutton.js"></script>
<script>
var opt = {
    initialContent: 'hello world',
    initialStyle :'body{color: #333; font-family: monospace!important; font-size: 12px; line-height:15px} p{margin: 0;}',
     minFrameHeight: 500
};
var myeditor = new baidu.editor.Editor(opt);
myeditor.render('ucoder-holder');
</script>